import QtQuick 1.0
import Qt.labs.components.native 1.0

Rectangle {

    property alias recipesModel: recipesModel
    property real bgOpacity: 0.6
    property color bgColor: "#F7F7F7"
    property int viewWidth: 640
    property int viewHeight: 360

    Rectangle{
        id: bgRect
        width: viewWidth
        height: viewHeight
        color: bgColor
        opacity: bgOpacity
        border.color: "grey"
        border.width: 2
        Behavior on opacity { NumberAnimation{ duration: 200 } }
    }

    GridView{
        id: recipesView
        anchors.centerIn: bgRect
        height: bgRect.height*0.8
        width: bgRect.width*0.8
        clip: true
        interactive: true
        model: recipesModel
        delegate: Item{
            Text {
                id: recipeName
                text: name
            }
        }

    }

    ListModel{
        id: recipesModel
    }

    function fillRecipesModel( recipesDetails ){
        recipesModel.clear();
        if(recipesDetails.length){
            var name = recipesDetails[0]["name"];
            recipesModel.append({"name": name});
        }
    }

}
